<template>
	<view class="container" :style="'min-height:'+height+'px'">
		<!-- hasborder -->
		<view class="common-box">
			<view class="title">土地信息</view>
			<view class="list-box hasmt">
				<view class="land-list-box">
					<view class="item flexVerticle" v-for="item in dataInfo.details">
						<view class="cover common-bg-img" :style="'background-image:url('+item.imageUrl+')'"></view>
						<view class="info">
							<view class="text">编号：{{item.landNo}}</view>
							<view class="text">价格：&yen;{{item.price / 100.0}}</view>
							<view class="text">面积：{{item.area}}m<text class="square-unit">2</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="common-box">
			<view class="list-box">
				<image class="icon" src="/static/icon/time.png" mode="aspectFit"></image>
				<text>配送周期：一月两次</text>
				<image class="row flexRightbox" src="/static/icon/rightrow.png"></image>
			</view>
		</view> -->
		<!-- <view class="common-box hasmt">
			<view class="list-box">
				<image class="icon" src="/static/icon/quan.png" mode="aspectFit"></image>
				<text>优惠券</text>
				<view class="centerFlex flexRightbox">
					<text class="tips">暂无可用优惠券</text>
					<image class="row haslen" src="/static/icon/rightrow.png"></image>
				</view>
			</view>
		</view> -->
		<!-- <view class="common-box hasmt">
			<view class="list-box">
				<image class="icon" src="/static/icon/zhongzi.png" mode="aspectFit"></image>
				<text>选择种子</text>
				<view class="centerFlex flexRightbox">
					<text class="tips">种子</text>
					<image class="row haslen" src="/static/icon/rightrow.png"></image>
				</view>
			</view>
		</view> -->
		<view class="common-box hasmt">
			<view class="title">收货地址</view>
			<view class="list-box hasmt" @click="slcAddress">
				<image class="icon" src="/static/icon/location1.png" mode="aspectFit"></image>
				<text>{{addressData.province + addressData.city + addressData.county}}</text>
				<image class="row flexRightbox" src="/static/icon/rightrow.png"></image>
			</view>
		</view>
		<view class="common-box hasmt">
			<view class="title">租赁人信息</view>
			<view class="list-box tipstext hasmt">
				<text>用户姓名</text>
				<text>{{addressData.consignee}}</text>
			</view>
			<view class="list-box tipstext hasmt">
				<text>联系电话</text>
				<text>{{addressData.phone}}</text>
			</view>
		</view>
		<view class="common-box hasmt">
			<view class="title"> 请选择支付方式</view>
			<view class="list-box hasmt" v-for="(item,index) in payList" @click="slcPay(item.id)">
				<image class="icon" :src="'/static/icon/'+item.icon+'.png'" mode="aspectFit"></image>
				<text>{{item.name}}<text class="bright" v-if="item.isFirst">（推荐）</text></text>
				<image class="circle-img" v-if="item.id == payId" src="/static/icon/slced.png"></image>
				<view class="circle" v-else></view>
			</view>
		</view>
		<view class="common-box hasmt">
			<view class="list-box">
				<text class="bold">总额</text>
				<view class="flexRightbox">
					<image class="symbol" src="/static/icon/symbol.png"></image>
					<text class="price">{{dataInfo.price / 100.0}}</text>
				</view>
			</view>
		</view>
		<view class="pay-btn common-bg-btn centerFlex" @click="gotoBuy">立即支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height:0,
				dataInfo:{},
				addressData:{},
				payList:[
					{name:'微信支付',id:2,isFirst:false,icon:'weixinzhifu'},
					// {name:'余额支付',id:3,isFirst:false,icon:'yuezhifu'},
				],//{name:'支付宝支付',id:1,isFirst:true,icon:'zhifubaozhifu'}
				payId:2
			}
		},
		onShow() {
			const that = this
		},
		onLoad(options) {
			const that = this
			this.height = uni.getSystemInfoSync().windowHeight
			that.dataInfo = JSON.parse(uni.getStorageSync("orderdata"))
			that.$api.request('address', 'getDefAddress',failres => {
				that.$api.msg(failres.errmsg)
			}).then(res => {
				that.addressData = res.data
			})
		},
		methods: {
			async loadData() {
				const that = this
			},
			videoErrorCallback: function(e) {
				
			},
			slcAddress(){
				uni.navigateTo({
					url:'/pages/address/list?source=1'
				})
			},
			gotoBuy(){
				const that = this
				let leaseOrderDO = {"totalPrice":that.dataInfo.price,"addressId":that.addressData.id,"detail":[]}
				this.dataInfo.details.forEach(item => {
					leaseOrderDO.detail.push({"landId":item.id})
				})
				leaseOrderDO = JSON.stringify(leaseOrderDO)
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('leaseOrder', 'takeOrder',{channel:'wx',leaseOrderDO:leaseOrderDO},failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					if(res.data){
						that.$api.landorderPay(res.data,function (){
							uni.navigateTo({
								url:'/pages/land/list'
							})
						},function (){
							uni.navigateTo({
								url:'/pages/land/list'
							})
						})
					}else{
						that.$api.msg('支付失败')
						uni.hideLoading()
					}
				})
			},
			calcFreightPrice() {
				const that = this
			},
			slcPay(id){
				this.payId = id
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		padding:24upx 30upx 150upx;
		background-color: #F9F9F9;
	}
	.common-box{
		padding:35upx;
		background:rgba(255,255,255,1);
		border-radius:20upx;
		.title{
			color: #333333;
			font-size: 36upx;
			font-weight: bold;
		}
		.list-box{
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: #333333;
			line-height: 1;
			.icon{
				width:44upx;
				height: 44upx;
				margin-right: 14upx;
			}
			&.hasmt{
				margin-top: 45upx;
			}
			&.hasmt-md{
				margin-top: 30upx;
			}
			.row{
				width: 16upx;
				height: 25upx;
				&.haslen{
					margin-left:8upx;
				}
			}
			.tips{
				font-size: 24upx;
				color: #666666;
			}
			.bright{
				color: #FF4E00;
			}
			.circle{
				width:30upx;
				height:30upx;
				border-radius: 50%;
				border:2upx solid #BFBFBF;
				margin-left: auto;
			}
			.circle-img{
				width:30upx;
				height:30upx;
				margin-left: auto;
			}
			.symbol{
				width:30upx;
				height: 30upx;
				margin-right: 15upx;
			}
			.price{
				color: #FF4E00;
				font-size: 40upx;
				line-height: 1;
			}
			.bold{
				font-weight: bold;
			}
			&.tipstext{
				font-size: 30upx;
				color: #666666;
				text:nth-child(2){
					margin-left: 40upx;
				}
			}
		}
		&.hasborder{
			border-bottom:1px solid #cccccc;
		}
		&.hasmt{
			margin-top: 20upx;
		}
	}
	.pay-btn{
		margin: 40upx auto 0;
		width:80%;
		height:88upx;
		border-radius:44upx;
		color: #fff;
		font-size: 36upx;
		font-weight: bold;
	}
	.land-list-box{
		.item{
			.cover{
				width:150upx;
				height: 150upx;
				margin-right:20upx;
				flex-shrink: 0;
				border-radius: 20upx;
			}
			.info{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 150upx;
				box-sizing: border-box;
				padding:4upx 0;
				font-size: 28upx;
				.text{
					
				}
			}
			&:not(:last-child){
				margin-bottom:20upx;
			}
		}
	}
</style>
